<template>
  <div class="left-scpjsj">
    <div class="mask-detail">
      <div @click="close" class="close" v-if="!isHall" />
      <div :class="isHall ? 'top-flex' : 'top-content'">
        <div>枇杷市场平均售价</div>
        <SelectYear @getYear="getYear" :yearOptions="yearOptions" :defaultYear="isHall?defaultYear1:defaultYear" />
      </div>
      <div class="scroll-content">
        <dv-scroll-board :config="config" style="width: 100%; height: 168px" ref="scrollBoard" />
      </div>
      <div class="total">所有品种均价: {{ averagePrice }} 元/斤</div>
    </div>
  </div>
</template>
<script>
import SelectYear from '../SelectYear.vue'
import { queryMarketAverageByeardp } from '@/api/dashboards'
import NP from 'number-precision'
export default {
  components: { SelectYear },
  props: {
    isHall: {
      type: Number,
    },
    yearList: {
      type: Array,
    },
    defaultYear:{
        type:[Number,String]
    }
  },
  data() {
    return {
      averagePrice: 0,
      yearOptions: [],
      defaultYear1: undefined,
      show: false,
      config: {},
    }
  },
  watch: {
    yearList: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.yearOptions = val
          this.defaultYear1 = val.length && val[val.length - 1].value
          this.queryMarketAverageByeardp(this.defaultYear1)
        }
      },
    },
    defaultYear: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.defaultYear = val
          this.queryMarketAverageByeardp(this.defaultYear)
        }
      },
    },
  },
  created() {},

  mounted() {},
  methods: {
    async queryMarketAverageByeardp(val) {
      let res = await queryMarketAverageByeardp({ year: val })
      let dataList = []
      let arr = res.result && res.result.list
      this.averagePrice = res.result.totalAverage
      if (arr.length) {
        arr = arr.sort(this.compare('average', false))
        arr &&
          arr.length &&
          arr.forEach((e) => {
            dataList.push([e.varietyIdName, e.average])
          })
      }
      this.config = {
        align: ['left', 'left'],
        waitTime: 3000,
        headerHeight: 28,
        columnWidth: [120, 160],
        rowNum: 5,
        header: ['品种', '单个品种均价 (元/斤)'],
        headerBGC: 'rgba(255, 255, 255, 0.04)',
        oddRowBGC: ' rgba(255, 255, 255, 0.04)',
        evenRowBGC: 'rgba(0, 255, 203, 0)',
        data: dataList,
      }
    },
    compare(property, desc) {
      return (a, b) => {
        var value1 = a[property]
        var value2 = b[property]
        if (desc == true) {
          // 升序排列
          return value1 - value2
        } else {
          // 降序排列
          return value2 - value1
        }
      }
    },
    showMask() {
      this.show = !this.show
      this.$emit('getShow1', this.show)
    },
    getYear(val) {
      if (val) {
        this.queryMarketAverageByeardp(val)
      }
    },
    close() {
      this.$emit('closeMask', false)
    },
  },
}
</script>
<style lang="less" scoped>
.left-scpjsj {
  /deep/ .ant-select-selection-selected-value {
    min-width: 34px;
  }
  width: 360px;
  height: 262px;
  color: #fff;
  .tab-title {
    padding: 14px 10px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .dec {
      width: 196px;
      height: 14px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      line-height: 14px;
    }
    .unit {
      padding-right: 15px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .tab-content {
    width: 360px;
    position: relative;
  }
  .mask-detail {
    width: 360px;
    height: 295px;
    // background: rgba(11, 17, 51, 0.85);
    // position: relative;
    // top: -105%;
    // left: 105%;
    // z-index: 1000;
    .close {
      cursor: pointer;
      width: 20px;
      height: 20px;
      background: url('../../assets/close.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      right: 12px;
      top: 12px;
    }
    .top-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 24px 0 24px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
    }
    .top-content {
      display: flex;
      align-items: center;
      padding: 24px 10px 0 24px;
    }
    .scroll-content {
      height: 178px;
      overflow: hidden;
      padding: 16px 24px;
      font-size: 12px;
      color: #ffffff;
      /deep/ .dv-scroll-board .header {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.4);
      }
      /deep/ .dv-scroll-board .rows {
        font-size: 12px;
        color: RGBA(229, 230, 234, 1);
        font-weight: 400;
      }
    }
    .total {
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #00dfff;
      padding-top: 20px;
    }
  }
}
</style>